import { Collapse,message } from 'antd';
import React,{ useEffect, useState } from 'react';
import cardStyles from '../index.less';
import { getReturnDetails } from '@/service/order/index';
import styles from './index.less';
import { GlobalState } from '@/models/global';

const {Panel} = Collapse
export interface FixedBarProps {
  global: GlobalState;
  dispatch: any;
  location: any;
}
function DeductionExpensesInfo(props:any) {
  const {info} = props
  const [deduction,setDeduction] = useState<any[]>([]) // 扣款列表
  const [deductionAll,setdeductionAll] = useState(0) // 扣款总额
  const [reduction,setReduction] = useState([]) // 减免列表
  const [reductionAll,setreductionAll] = useState(0) // 减免总额
  // const [data,setDate] = useState() // 回显数据
  const [allNum,setAllNum] = useState(0)
  const [allNumState,setAllNumState] = useState('1')
  const customizeHeader = (value: string) => (
    <div>
      <div className={styles.tip} />
      {value}
      <span className={styles.value}>{allNumState ==='1'?'需要客户补缴金额/元':'需要退还客户金额/元'}:{allNum}</span>
    </div>
  )
  const calculation = ()=>{
    if(deductionAll>reductionAll){
      setAllNumState('1')
      setAllNum(Number((deductionAll-reductionAll).toFixed(2)))
    }else{
      setAllNumState('2')
      setAllNum(Number((reductionAll-deductionAll).toFixed(2)))
    }
  } // 计算需补交还是退
  useEffect(()=>{
    let num1 = 0 // 欠款
    let num2 = 0 // 剩余账款
    if(info?.id){
      getReturnDetails(info?.id).then((res: any) => {
        if (res.success) {
          // setDate(res?.data)
          if(res?.data?.collectFeeList){
            setDeduction(res?.data?.collectFeeList)
            res?.data?.collectFeeList?.forEach((res1:any)=>{
              if(res?.feeItemAmount ==='0.00'){
                res.feeItemAmount = 0  
              }
              num1 = Number((Number(res1.feeItemAmount)+num1).toFixed(2))
            })
          }
          if(res?.data?.deductionFeeList){
            setReduction(res?.data?.deductionFeeList)
            res?.data?.deductionFeeList?.forEach((res2:any)=>{
              if(res?.feeItemAmount ==='0.00'){
                res.feeItemAmount = 0 
              }
              num2 = Number((Number(res2.feeItemAmount)+num2).toFixed(2))
            })
          }
          setdeductionAll(num1)
          setreductionAll(num2)
        }
      });
    }
  },[info])
  useEffect(()=>{
    calculation()
  },[deductionAll,reductionAll])
 
  return (
    <div className={cardStyles.card}>
        <Collapse
          defaultActiveKey={['1', '2']}
          ghost
          expandIconPosition="end">
             <Panel header={customizeHeader('退车结算信息')} key="1">
             <div className={styles.box}>
                <p className={styles.title}>扣款费用项</p>
                <div className={styles.line}>
                  {deduction?.map((res:any)=>(
                      <div className={styles.line_box}>
                      <p className={styles.text}>{res?.feeItemName}:</p>
                      <p className={styles.value}>{res?.feeItemAmount}</p>
                    </div> 
                  ))}
                </div>
                <div className={styles.all}>
                  <span>合计：</span>
                  <span>{deductionAll}</span>
                </div>
              </div>
              <div className={styles.box}>
                <p className={styles.title}>减免费用项</p>
                <div className={styles.line}>
                {reduction?.map((res:any)=>(
                      <div className={styles.line_box}>
                      <p className={styles.text}>{res?.feeItemName}:</p>
                      <p className={styles.value}>{res?.feeItemAmount}</p>  
                    </div> 
                  ))}
                </div>
                <div className={styles.all}>
                  <span>合计：</span>
                  <span>{reductionAll}</span>
                </div>
              </div>
              
                </Panel>
            </Collapse>    
    </div>
  );
}
export default DeductionExpensesInfo;
